 <#import "inc/macro-page.html" as panel>
<#escape x as x?html>
<@panel.header "专业能力红绿灯预警" "">
<style>
.same-height {

}
</style>
</@panel.header>
<@panel.body>
            <!-- Bread crumb -->
            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3>专业能力红绿灯预警</h3> </div>
                <div class="col-md-7 align-self-center">
                    <div class="page-nav-bar">
                		<button type="button" class="btn btn-danger" onclick="javascript: history.back();"><i class="fa fa-undo"></i></button>
                	</div>
                </div>
            </div>
            <!-- End Bread crumb -->
            <!-- Container fluid  -->
            <div class="container-fluid">
                <!-- Start Page Content -->
	              <div class="card">
	                  <h4 class="card-title" id="ceshi">个人报告：<#if user??>${user.name!}</#if></h4>
					  <button id="id-export-file" style="position:absolute;right: 20px" type="button" class="btn btn-dark btn-outline btn-sm m-l-10" title="导出"><i class="fa fa-share-square-o"></i></button>
	                  <div class="card-body">
	                    <div class="row m-t-20">
	                    	<div class="col-lg-7">
				                <div class="row">
				                   <div class="col-lg-6">
				                   		<div class="card">
				                   			<h4 class="card-title">专业化能力&绩效九宫格</h4>
				                   			<table id="id-sudoku-height" class="table table-bordered" cell-spacing="0" width="100%">
				                   				<tr>
													<#if user?? && user.jgg==3>
													<td class="text-center" style="background-color: #ffa206 !important; color: white !important;">有潜力改进</td>
													<#else>
													<td class="text-center">有潜力改进</td>
												</#if>
												<#if user?? && user.jgg==6>
												<td class="text-center" style="background-color: #a4ce9d !important; color: white !important;">优秀</td>
												<#else>
												<td class="text-center">优秀</td>
											</#if>
												<#if user?? && user.jgg==9>
												<td class="text-center" style="background-color: #67AD5B !important; color: white !important;">卓越规范</td>
												<#else>
												<td class="text-center">卓越规范</td>
											</#if>
				                   				</tr>
				                   				<tr>
													<#if user?? && user.jgg==2>
													<td class="text-center" style="background-color: #ffa206 !important; color: white !important;">改进绩效</td>
													<#else>
													<td class="text-center">改进绩效</td>
												</#if>
													<#if user?? && user.jgg==5>
													<td class="text-center" style="background-color: #58a2eb !important; color: white !important;">稳定贡献</td>
													<#else>
													<td class="text-center">稳定贡献</td>
												</#if>
													<#if user?? && user.jgg==8>
													<td class="text-center stat-excellent-bg" style="background-color: #a4ce9d !important; color: white !important;">优秀</td>
													<#else>
													<td class="text-center">优秀</td>
												</#if>
				                   				</tr>
				                   				<tr>
													<#if user?? && user.jgg==1>
													<td class="text-center" style="background-color: #ef5350 !important; color: white !important;">转岗待岗</td>
													<#else>
													<td class="text-center">转岗待岗</td>
												</#if>
                                                    <#if user?? && user.jgg==4>
                                                    <td class="text-center" style="background-color: #ffa206 !important; color: white !important;">提升能力</td>
                                                    <#else>
                                                    <td class="text-center">提升能力</td>
                                                </#if>
                                                    <#if user?? && user.jgg==7>
                                                    <td class="text-center" style="background-color: #58a2eb !important; color: white !important;">提升能力</td>
                                                    <#else>
                                                    <td class="text-center">提升能力</td>
                                                </#if>
				                   				</tr>
				                   			</table>
				                   		</div>
				                   </div>
				                   <div class="col-lg-6">
				                   		<div class="card">
				                   			<h4 class="card-title">个人总体评价</h4>
				                   			<ul class="text-list" id="id-recommend-height">
				                   				<li>在能力绩效九宫格中评价为优秀；专业化能力表现为优秀；绩效表现为合格；</li>
				                   				<li>在言语理解、指导他人、任务管理、沟通与协调、文字表达等能力上表现出较强的优势，应着重安排有助于发挥其优势的工作任务；在资料分析、支持与服务等能力上表现出较弱的短板，是未来应着重提升的能力；</li>
				                   				<li>总体来看，能够较好胜任本专业岗位工作，具有较大发展潜力，可列为部门关键培养对象；结合九宫格所处位置，未来应针对其优势，指派更具挑战性的任务，鼓励其提升绩效表现。</li>

				                   			</ul>
				                   		</div>
				                   </div>
				                   <div class="col-lg-4">
				                   		<div class="card">
				                   			<h4 class="card-title">相对优势</h4>
				                   			<ul class="text-list">
				                   				<li>善于理解上级指令，并能清洗表达；</li>
				                   				<li>擅长指导他人开展工作，能够很好的管理任务的进度和成效，善于进行人际沟通与协调，具有较好的文字表达功底和能力；</li>
				                   				<li>个性表现出外向和热情特征，亲和力驱动力较强，善于处理人际和团队协调工作；</li>
				                   				<li>专业技能优秀，可独立处理和解决专业问题。</li>
				                   			</ul>
				                   		</div>
				                   </div>
				                   <div class="col-lg-4">
				                   		<div class="card">
				                   			<h4 class="card-title">相对胜任</h4>
				                   			<ul class="text-list">
				                   				<li>具有一定的数学基础和思维能力，能够进行相对常规的逻辑分析和推理；</li>
				                   				<li>在一定程度上能够顾全大局，敢于承担责任，基本能力理解公司和上级意图，并促进他人理解，具有一定的求知欲和学习意识，较好的开放心态。</li>
				                   			</ul>
				                   		</div>
				                   </div>
				                   <div class="col-lg-4">
				                   		<div class="card">
				                   			<h4 class="card-title">相对短板</h4>
				                   			<ul class="text-list">
				                   				<li>在资料分析中，对于迅速有效的提取和运用信息并解决问题存在不足</li>
				                   				<li>在支持与服务上，可能显得比较被动，不能及时高效的提供支持</li>
				                   				<li>成就驱动力相对较低，可能影响其追求较高的目标和成果，对长期发展而言可能缺乏一定的内在动力</li>
				                   			</ul>
				                   		</div>
				                   </div>
				                   <div class="col-lg-4">
				                   		<div class="card">
				                   			<h4 class="card-title">专业匹配度评价</h4>
				                   			<ul class="text-list">
				                   				<li>在（党委组织部）专业化能力测评中胜任匹配度为：</li>
				                   				<li>90%</li>
				                   				<li>较好胜任本专业岗位工作</li>
				                   				<li>有较大发展潜力</li>
				                   				<li>可列为部门关键培养对象</li>
				                   			</ul>
				                   		</div>
				                   </div>
				                   <div class="col-lg-4">
				                   		<div class="card">
				                   			<h4 class="card-title">岗位锻炼/调整建议</h4>
				                   			<ul class="text-list">
				                   				<li>岗位锻炼：</li>
				                   				<li>带教新员工/转岗员工，参与重要报告/方案编写，负责课题项目，组织协调专项工作推进</li>
				                   				<li>建议：</li>
				                   				<li>应针对其优势，指派更具挑战性的任务，鼓励展现出更好的绩效成果</li>
				                   			</ul>
				                   		</div>
				                   </div>
				                   <div class="col-lg-4">
				                   		<div class="card">
				                   			<h4 class="card-title">培训建议</h4>
				                   			<ul class="text-list">
				                   				<li>重点发展能力：</li>
				                   				<li>资料分析能力，支持与服务能力</li>
				                   				<li>建议培训课程及学习内容：</li>
				                   				<li>《人力资源数据分析与研究》</li>
				                   				<li>《内部客户服务意识与技巧》</li>
				                   				<li>《关键时刻MOT》、《顾问式思维》</li>
				                   			</ul>
				                   		</div>
				                   </div>
				                </div>
	                    	</div>
	                    	<div class="col-lg-5">
	                    		<div class="card">
		                    		<table class="table table-bordered table-cell-wrap" cell-spacing="0" width="100%">
		                    		    <thead>
			                    			<tr>
			                    				<th nowrap>测评内容</th>
			                    				<th>可发展领域</th>
			                    				<th>培训发展建议</th>
			                    			</tr>
		                    			</thead>
		                    			<tbody>
			                    			<tr>
			                    				<td>一般能力</td>
			                    				<td>在资料分析中，对于迅速有效的提取和运用信息并解决问题存在不足</td>
			                    				<td><b>培训课程：</b>《人力资源数据分析与研究》<br/><b>发展活动：</b>分析一项较为复杂的工作问题，着重分析数据或资讯信息找出解决方法并给出解决方案。</td>
			                    			</tr>
			                    			<tr>
			                    				<td>胜任力</td>
			                    				<td>在支持与服务上，可鞥显得比较被动，不能及时高效的提供支持</td>
			                    				<td><b>培训课程：</b>《内部客户服务意识与技巧》、《关键时刻MOT》、《顾问式思维》<br/><b>发展活动：</b>为他人提供必要的支持和协助，解决一个其他部门解决工作上的需求，建立一个与他人/部门的紧密沟通渠道；尝试梳理同类需求，形成解决方案为他人/部门提供一次专业咨询服务。</td>
			                    			</tr>
			                    			<tr>
			                    				<td>大五个性特质</td>
			                    				<td colspan="2">个性表现不能被定义为短板，但仍然可以发展，其核心不是改变个性，而是了解自己的个性特征，注意个性特征中表现特别高或特别低的方面，这些方面可能会带来一些误解、负面行为等；在深入了解自己的个性密码基础上，掌握情境式调适的方向（在特定情境下，可能表现出过高或过低的行为特点，避免过高或过低带来的负面行为），预测和控制可能出现的负面行为。</td>
			                    			</tr>
			                    			<tr>
			                    				<td>内在驱动力</td>
			                    				<td>成就驱动力相对较低，可能影响其追求较高的目标和成果，对长期发展而言可能会缺乏一定的内在动力。</td>
			                    				<td><b>培训课程：</b>《自我洞察与觉醒》<br/><b>发展活动：</b>在合适的工作领域或生活领域，树立一个相对具有挑战性的目标，通过努力实现这个目标；接受非职责范围内的重要任务，并争取最佳表现。</td>
			                    			</tr>
			                    			<tr>
			                    				<td>专业知识与技能</td>
			                    				<td>整体表现优秀，测评中无特别短板</td>
			                    				<td>跟随专业发展，动态更新专业知识结构和前沿资讯，进一步提升专业视野。</td>
			                    			</tr>
		                    			</tbody>
		                    		</table>
		                    	</div>
		                    </div>
	                    </div>
	                  </div>
	              </div>
                <!-- End PAge Content -->
            </div>
            <!-- End Container fluid  -->
</@panel.body>
 <script>
	 const btn = document.getElementById('id-export-file');
	 btn.addEventListener('click', function() {
		 console.log(123);
		 console.log(123123);

		 // 创建一个临时容器来存放要导出的内容
		 const exportContent = document.createElement('div');

		 // 复制整个卡片内容
		 const cardBody = document.querySelector('.card-body').cloneNode(true);
		 exportContent.appendChild(cardBody);

		 // 复制包含人名的 h4 元素
		 const personalReportTitle = document.getElementById('ceshi').cloneNode(true);

		 // 检查 exportContent 中是否已经包含了 #ceshi 元素，如果没有，则添加
		 if (!exportContent.querySelector('#ceshi')) {
			 exportContent.insertBefore(personalReportTitle, exportContent.firstChild);
		 }

		 // 添加必要的样式
		 const styles = '<style>' +
				 '    /* 基础表格样式 */' +
				 '    table {' +
				 '        border-collapse: collapse;' +
				 '        /*width: 100%;*/' +
				 '        height: 200px;' +
				 '        margin-bottom: 20px;' +
				 '    }' +
				 '' +
				 '    th, td {' +
				 '        border: 1px solid #000;' +
				 '        padding: 8px;' +
				 '        height: 50px;' +
				 '        text-align: center;' +
				 '    }' +
				 '' +
				 '    /* 九宫格特殊样式 */' +
				 '    .stat-outstanding-bg { background-color: #67AD5B; color: white; }' +
				 '    .stat-excellent-bg { background-color: rgba(76, 175, 80, 0.6); color: white; }' +
				 '    .stat-good-bg { background-color: #58a2eb; color: white; }' +
				 '    .stat-pass-bg { background-color: #ffa206; color: white; }' +
				 '    .stat-bad-bg { background-color: #ef5350; color: white; }' +
				 '' +
				 '    /* 文本样式 */' +
				 '    .card-title {' +
				 '        font-size: 16px;' +
				 '        font-weight: bold;' +
				 '        margin-bottom: 10px;' +
				 '    }' +
				 '' +
				 '    .text-list {' +
				 '        padding-left: 20px;' +
				 '    }' +
				 '' +
				 '    .text-list li {' +
				 '        margin-bottom: 5px;' +
				 '    }' +
				 '' +
				 '    /* 布局样式 */' +
				 '    .row {' +
				 '        margin-bottom: 20px;' +
				 '    }' +
				 '' +
				 '    .card {' +
				 '        border: 1px solid #ddd;' +
				 '        padding: 15px;' +
				 '        margin-bottom: 15px;' +
				 '    }' +
				 '' +
				 '</style>';



		 // 创建完整的HTML文档
		 var htmlContent = '' +
				 '<!DOCTYPE html>' +
				 '<html>' +
				 '<head>' +
				 '    <meta charset="utf-8">' +
				 '    <title>专业能力红绿灯预警</title>' +
				 styles +
				 '</head>' +
				 '<body>' +
				 '    <h1 style="text-align: center; margin-bottom: 20px;">专业能力红绿灯预警</h1>' +
				 exportContent.innerHTML +
				 '</body>' +
				 '</html>';

		 // 创建Blob对象
		 const blob = new Blob([htmlContent], {
			 type: 'application/msword'
		 });

		 // 创建下载链接
		 const downloadLink = document.createElement('a');
		 downloadLink.href = URL.createObjectURL(blob);
		 downloadLink.download = '专业能力红绿灯预警.doc';

		 // 触发下载
		 document.body.appendChild(downloadLink);
		 downloadLink.click();
		 document.body.removeChild(downloadLink);

		 // 清理URL对象
		 setTimeout(function() {
			 URL.revokeObjectURL(downloadLink.href);
		 }, 100);
	 });
 </script>



<@panel.footer>
<script type="text/javascript" src="${ROOT}/mind/js/lib/alangyun/divresize.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$(".btn-click-bind").click(function() {
		  var val = $(this).data("sign");
		  var ctx = "/t/sudoku";
		  if(12===val){
			  ctx = "/t/sudoku12";
		  }
		  window.location.href="${ROOT}" + ctx;
	});

	var tableResize = function(){
		var $me = $('#id-recommend-height');
		var $table = $('#id-sudoku-height');

		$table.css("height", $me.get(0).offsetHeight+'px');
	};

	$('#id-recommend-height').resize(tableResize);
	tableResize();
});
</script>
</@panel.footer>
</#escape>
